<!DOCTYPE html>
<html>

<head>
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- BEGIN: Mobile Optimization -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        div {
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        input[type="date"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: border-color 0.3s;
        }

        input[type="date"]:focus {
            border-color: #007BFF;
            outline: none;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            display: block;
            margin: 0 auto;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        #result {
            margin-top: 20px;
        }

        @media (max-width: 600px) {

            /* BEGIN: Responsive Styles */
            body {
                padding: 10px;
            }

            h1 {
                font-size: 1.5em;
            }

            button {
                width: 100%;
            }

            table {
                font-size: 14px;
            }
        }

        /* END: Responsive Styles */
    </style>
</head>

<body>
    <h1>点餐统计</h1>
    <div>
        <label for="start-date">开始日期:</label>
        <!-- <input type="date" id="start-date" name="start-date"> -->
        <input type="datetime-local" id="start-date" name="start-date">

        <label for="end-date">结束日期:</label>
        <!-- <input type="date" id="end-date" name="end-date"> -->
        <input type="datetime-local" id="end-date" name="end-date">
    </div>
    <button id="submit-button">提交</button>
    <div id="result"></div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const today = new Date();
            const startDate = new Date(today);
            startDate.setDate(today.getDate());
            startDate.setHours(0, 0, 0, 0); // Set to 00:00:00

            const endDate = new Date(today);
            endDate.setHours(23, 59, 59, 0); // Set to 23:59:59

            const startDateInput = document.getElementById("start-date");
            const endDateInput = document.getElementById("end-date");
            // 新增格式化函数
            function formatDateTimeLocal(date) {
                return new Date(date.getTime() - date.getTimezoneOffset() * 60000)
                    .toISOString()
                    .slice(0, 19);
            }
            //startDateInput.value = startDate.toISOString().split('T')[0];
            //endDateInput.value = endDate.toISOString().split('T')[0];
            // 修改后
            startDateInput.value = formatDateTimeLocal(startDate);
            endDateInput.value = formatDateTimeLocal(endDate);
        });
        document.getElementById("submit-button").addEventListener("click", function () {
            const startDate = document.getElementById("start-date").value;
            const endDate = document.getElementById("end-date").value;
            const startTimestamp = new Date(startDate).getTime();
            const endTimestamp = new Date(endDate).getTime();
            //console.log("开始时间戳:", startTimestamp, "结束时间戳:", endTimestamp);
            fetch('/dc', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ startTimestamp, endTimestamp })
            })
                .then(response => response.json())
                .then(data => {

                    console.log("返回数据:", data.respdata);

                    const resultDiv = document.getElementById("result");
                    resultDiv.innerHTML = ''; // Clear previous results

                    const table = document.createElement('table');
                    const headerRow = document.createElement('tr');

                    // Create table headers
                    const timeHeader = document.createElement('th');
                    timeHeader.innerText = '时间';
                    headerRow.appendChild(timeHeader);

                    const contentHeader = document.createElement('th');
                    contentHeader.innerText = '内容';
                    headerRow.appendChild(contentHeader);

                    const statsHeader = document.createElement('th');
                    statsHeader.innerText = '统计';
                    headerRow.appendChild(statsHeader);

                    table.appendChild(headerRow);

                    // Populate table with data
                    data.respdata.sort((a, b) => b[1] - a[1]); // Sort by timestamp
                    data.respdata.forEach(item => {
                        const row = document.createElement('tr');
                        //时间
                        const timeCell = document.createElement('td');
                        const date = new Date(item[1] * 1000); // Assuming item[1] is a timestamp
                        timeCell.innerText = date.toLocaleString(); // Convert timestamp to date format with time
                        row.appendChild(timeCell);
                        //内容
                        const contentCell = document.createElement('td');
                        let contentHtml;
                        contentHtml = `<span style="color: gray;">${item[0]}</span>`;
                        if (/早餐|午餐|晚餐|值班|歺|中餐/.test(item[0])) {
                            contentHtml = `<span style="color: black;font-weight: bold;">${item[0]}</span>`;
                        } {
                            if (item[0].includes("不"))
                                contentHtml = `<span style="color: red;">${item[0]}</span>`;
                        }
                        //contentHtml = item[0].includes("不") ? `<span style="color: red;">${item[0]}</span>`: `<span style="color: black;">${item[0]}</span>`;

                        contentCell.innerHTML = contentHtml; // Assuming item has a 'content' property
                        row.appendChild(contentCell);
                        //统计
                        const statsCell = document.createElement('td');
                        statsCell.innerText = item[2]; // Assuming item has a 'stats' property
                        row.appendChild(statsCell);

                        table.appendChild(row);
                    });

                    resultDiv.appendChild(table);
                })
                .catch(error => {
                    document.getElementById("result").innerText = 'Error: ' + error;
                });
        });
    </script>
</body>

</html>